import { MutationTree, ActionTree, ModuleTree } from 'vuex'
import { PlaylistState } from '../../interface/music'
import { getPlaylistDetail, getSongDetail } from '../../api/music'

const state: PlaylistState = {
    playingSong: {},
    songPlaylist: [],
}
const mutations: MutationTree<PlaylistState> = {
    SET_SONGPLAYLIST: (state: PlaylistState, list: Array<object>) => {
        state.songPlaylist = list
    },
    SET_ADDSONG: (state: PlaylistState, song: object) => {
        state.songPlaylist.push(song)
    },
    SET_REMOVESONG: (state: PlaylistState, index: number) => {
        state.songPlaylist.splice(index, 1)
    }
}
const actions:ActionTree<PlaylistState, any> = {
    playOrStop() {

    },
    nextSong() {

    },
    prevSong() {

    },
    addSong(context: any) {
        context.commit('SET_ADDSONG')
    },
    removeSong() {

    },
    async a(){
        const res = await getPlaylistDetail("")
        const trackIds: Array<any> = res.data.playlist.trackIds
        let ids = ''
        for(let i = 0; i< trackIds.length; i++){
            if(i === trackIds.length-1){
                ids += trackIds[i].id
            }else{
                ids += trackIds[i].id + ','
            }
        }
        console.log(ids)
        const detail = await getSongDetail(ids)
        console.log(detail.data.songs)
    }
}
export default {
    namespaced: true,
    state,
    mutations,
    actions
}